<template>
  <div style="height: 60px; display:flex;align-content: center">
    <div style="display: flex;align-items: center;padding-left: 20px">
      <img style="width: 30px; height: 30px;border-radius: 50%" src="@/assets/imgs/logo.jpg" alt="">
      <span style="font-size: 20px;font-weight: bold;color:#2b38ff;margin-left: 5px">We learn</span>
    </div>
    <div style="flex:1"></div>
    <div style="width: fit-content;display: flex;align-items: center;padding-right: 20px">
      <RouterLink style="text-decoration: none" to="/">
        <div class="header-home">
          <el-button round>
            <el-icon color="#005eb6" size="25"><HomeFilled /></el-icon>
            <p class="header-text">首页</p>
          </el-button>
        </div>
      </RouterLink>
      <RouterLink style="text-decoration: none" to="/">
        <div class="header-course">
          <el-button round>
            <el-icon color="#005eb6" size="25"><UserFilled /></el-icon>
            <p class="header-text">加入我们</p>
          </el-button>
        </div>
      </RouterLink>
    </div>
  </div>
</template>

<script>
import {createApp} from "vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names,vue/no-reserved-component-names
  name: 'Header',
  components: {UserFilled, HomeFilled},
  // No props for images, we use slots instead
};
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from "@/App.vue";
import {HomeFilled, UserFilled} from "@element-plus/icons-vue";

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.header-home{
  width: fit-content;
  display: flex;
  align-items: center;
  padding-right: 20px;
  z-index: 20;
  color:#005eb6;
}
.header-course{
  width: fit-content;
  display: flex;
  align-items: center;
  padding-right: 20px;
  z-index: 20;
  color:#005eb6;
}
.header-text{
  align-content: center;
  position: relative;
  top: 2px;
  left: 3px;
}
</style>
